import React from "react";
import { Carousel } from 'antd';
import { useNavigate } from 'react-router-dom';

const contentStyle = {
    margin: 0,
    height: '480px',
    width: '100vw',
    color: '#FE4E84',
    textAlign: 'center',
    background: 'linear-gradient(to bottom, pink, #FFF)',
};

const ShowProductComponent = ({ products }) => {
    const navigate = useNavigate();

    const handleBack = () => {
        navigate('/product');
    };

    const getImageSrc = (index) => {
        return products && products.details && products.details[index]
            ? products.details[index]
            : 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1698304477.56836008.png';
    };

    console.log("products::::::", products);

    return (
        <div style={{ width: '100vw', margin: 'auto', backgroundColor: '#fff' }}>
            <Carousel dotPosition={'top'}>
                <div>
                    <h3 style={contentStyle}>
                        <img style={contentStyle} src={getImageSrc(0)} alt="product" />
                    </h3>
                </div>
                <div>
                    <h3 style={contentStyle}>
                        <img style={contentStyle} src={getImageSrc(1)} alt="product" />
                    </h3>
                </div>
                <div>
                    <h3 style={contentStyle}>
                        <img style={contentStyle} src={getImageSrc(2)} alt="product" />
                    </h3>
                </div>
                <div>
                    <h3 style={contentStyle}>
                        <img style={contentStyle} src={getImageSrc(3)} alt="product" />
                    </h3>
                </div>
            </Carousel>
        </div>
    );
};

export default ShowProductComponent;
